<template>
  <div class="care">
    <Button type="primary" @click="visible = true">{{ text }}</Button>
    <el-dialog
      :visible.sync="visible"
      destroy-on-close
      :close-on-click-modal="false"
      :title="title"
      :append-to-body="true"
      @open="openSinga"
      @close="resetForm"
    >
      <div class="content">
        <el-row>
          <el-form
            ref="form"
            :model="formData"
            :rules="formRules"
            label-width="80px"
          >
            <el-col :span="20">
              <el-form-item prop="type" label="关怀方式">
                <el-select
                  v-model="formData.type"
                  placeholder="请选择"
                  filterable
                  clearable
                  style="width:100%"
                >
                  <el-option
                    v-for="(list, index) in careTypeOp"
                    :key="index"
                    :label="list.dictName"
                    :value="list.dictCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="product" label="礼品名称">
                <SearchSelectPicker
                  url="/call-center/api/v1/careGift/page"
                  placeholder="请选择礼品"
                  lable-name="giftName"
                  value-name="giftCode"
                  :value.sync="formData.product"
                ></SearchSelectPicker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item :span="12" prop="number" label="礼品数量">
                <el-select
                  v-model="formData.number"
                  placeholder="请选择"
                  filterable
                  clearable
                  style="width:100%"
                >
                  <el-option v-for="(list, index) in 5" :key="index" :label="list" :value="list" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <svg class="icon" aria-hidden="true" @click="addItem">
                <use xlink:href="#tianjiaxinjian" />
              </svg>
            </el-col>
            <div v-for="(item, index) in formData.dynamicItem" :key="index">
              <el-col :span="10">
                <el-form-item :prop="'dynamicItem.' + index +'.product'" label="礼品名称">
                  <SearchSelectPicker
                    url="/call-center/api/v1/careGift/page"
                    placeholder="请选择礼品"
                    lable-name="giftName"
                    value-name="giftCode"
                    :value.sync="item.product"
                  ></SearchSelectPicker>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item :span="12" :prop="'dynamicItem.' + index +'.number'" label="礼品数量">
                  <el-select
                    v-model="item.number"
                    placeholder="请选择"
                    filterable
                    clearable
                    style="width:100%"
                  >
                    <el-option v-for="(list, key) in 5" :key="key" :label="list" :value="list" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <svg class="icon delete" aria-hidden="true" @click="deleteItem(item, index)">
                  <use xlink:href="#shanchulajixiang-line" />
                </svg>
              </el-col>
            </div>
            <el-col :span="20">
              <el-form-item prop="remark" label="备注">
                <el-input
                  v-model="formData.remark"
                  type="textarea"
                  :autosize="{minRows:3}"
                  placeholder="请输入备注"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="" align="right">
                <Button @click="visible = false">取消</Button>
                <Button type="primary" :loading="loading" @click="submitHandle">确定</Button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Button from '@/components/Button'
// import FormContainer from '@/components/FormContainer'
import SearchSelectPicker from '@/components/SearchSelectPicker'
export default {
  name: 'Care',
  components: {
    Button,
    SearchSelectPicker
    // FormContainer
  },
  props: {
    text: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      formData: {
        type: '',
        remark: '',
        product: '',
        number: '',
        dynamicItem: []
      },
      formRules: {
        type: [
          { required: true, message: '请选择关怀方式', trigger: 'change' }
        ],
        remark: [{ required: false, message: '请输入备注', trigger: 'change' }]
      },
      careTypeOp: [{
        dictCode: 1,
        dictName: '短信关怀'
      }, {
        dictCode: 2,
        dictName: '电话关怀'
      }, {
        dictCode: 3,
        dictName: '贺卡关怀'
      }, {
        dictCode: 4,
        dictName: '礼物关怀'
      }]
    }
  },
  methods: {
    // 增加表单Item
    addItem() {
      this.formData.dynamicItem.push({
        product: '',
        number: ''
      })
    },
    // 删除动态Item
    deleteItem(item, index) {
      this.formData.dynamicItem.splice(index, 1)
    },
    // 关闭弹窗
    openSinga() {
      // this.$refs.form.resetFields()
      // this.formData.dynamicItem = []
    },
    // 重置表单
    resetForm() {
      this.formData.dynamicItem = []
      this.$refs.form.resetFields()
    },
    // 确定
    submitHandle() {
      // this.loading = true
      this.$refs.form.validate().then(() => {
        // console.log(this.formData)
        // this.$emit('on-success', true)
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.care {
  display: inline-block;
  & .content {
    padding: 0;
  }
}
.icon {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  color: #16BC83;
  cursor: pointer;
  margin: 5px;
}
.delete {
  color: red !important;
}
</style>
